<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<link href="css/sweetalert.css" rel="stylesheet">
<link href="css/application.css" rel="stylesheet">
<title>购物车</title>
</head>
<body>
	<header>
		<div class="headerbar">
			<h1>购物车</h1>
			<a class="navbar-toggle" href="index.html">
				<span class="icon-m_goback"></span>
			</a>
		</div>
	</header>

	<div class="medialist">
		<div class="medialist-header clearfix">
			<div class="icheck pull-left"><input type="checkbox" name="checkall" class="iradio checkall" id="checkall"></div>&nbsp;&nbsp;<label for="checkall">全选</label>
			<a class="pull-right" onclick="emptycart()">清空</a>
		</div>
		<div class="media">
        	<div class="icheck"><input type="checkbox" name="iCheck" class="iradio"></div>
        	<a class="productimg thumbnail"><img src="http://www.placehold.it/128x128/EFEFEF/AAAAAA" width="128" ></a>
          <div class="media-body">
						<h4><span>产品名称名称产品</span></h4>
						<div class="spinnersbox">
								<input type="number" class="spinners" value="0"/>
						</div>
						<p><span class="prices" data-value="200">￥200</span></p>
          </div>
					<div class="showbtn-group">
						<a class="btn-del"><i class="icon-delete"></i></a>
					</div>
    </div>
		<div class="media">
        	<div class="icheck"><input type="checkbox" name="iCheck" class="iradio"></div>
        	<a class="productimg thumbnail"><img src="http://www.placehold.it/128x128/EFEFEF/AAAAAA" width="128" ></a>
          <div class="media-body">
						<h4><span>产品名称名称产品</span></h4>
						<div class="spinnersbox">
								<input type="number" class="spinners" value="0"/>
						</div>
						<p><span class="prices" data-value="200">￥200</span></p>
          </div>
					<div class="showbtn-group">
						<a class="btn-del"><i class="icon-delete"></i></a>
					</div>
    </div>
  </div>


	<footer>
		<div class="footheight"></div>
		<div class="row footbar">
			<div class="col-12 billing">
				<div class="icheck pull-left"><input type="checkbox" name="checkall" class="iradio checkall" id="checkall2"></div>&nbsp;&nbsp;<label for="checkall2">全选</label>&nbsp;&nbsp;
				<label>合计：<span class="prices total"> </span></label>
				<a class="pull-right btn" href="order.html">结算</a>
			</div>
			<a class="col-4 text-center" href="index.html" ><span class="icon-home"></span>首页</a>
			<a class="col-4 text-center active" href="cart.html" ><span class="icon-cart2"></span>购物车</a>
			<a class="col-4 text-center" href="profile.html" ><span class="icon-user2"></span>我的</a>
		</div>
	</footer>

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/swipeSlide.min.js" type="text/javascript"></script>
<script src="js/sweetalert.min.js" type="text/javascript"></script>
<script src="js/jquery.mmenu.min.js" type="text/javascript"></script>
<script src="js/icheck.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery.touchSwipe.min.js"></script>
<script src="js/application.js" type="text/javascript"></script>
<script>
var price = function(){
	var sp = 0;
	$(".media").each(function(){
		var obj = $(this);
		var state = obj.find(":checkbox")[0].checked;
		if(state)
		{
			sp = sp + parseInt(obj.find(".spinners").val())*parseInt(obj.find(".prices").attr("data-value"))
		}
	})
	$(".total").html("￥"+sp)
}

//空的购物车
var emptycart = function(){
	$(".billing").remove();
	$(".medialist").html("<section class='waitingwrapper'><div class='text-center purple' style='font-size:5rem'><span class='icon-cart'></span></div><p class='text-center' >购物车为空</p></section>")
}

$(function(){
	$('input:checkbox').iCheck({
		checkboxClass: 'iradio_square-purple',
    increaseArea: '50%' // optional
  });

	$('.spinners').spinner({max:5});

	//全选
	$("#checkall2,#checkall").on('ifChanged',function(event){
		$(":checkbox").iCheck(event.target.checked?"check":"uncheck");
	});

	//计价触发
	$(":checkbox").on('ifToggled',function(event){
		price();
	});
	$("button.increase,button.decrease").on("click",function(){
		price();
	})

	$(".btn-del").on('click',function(){
		if($(".media").length==1)
		{
			emptycart();
		}else{
			$(this).closest(".media").remove();
			price();
		}

		//购物车移除操作
		//  //  //  //
	})


})

</script>
</body>
</html>
